<template>
  <!-- 页面结构组合 头部导航条 右侧菜单 中间内容展示 -->
  <div class="wrapper">
    <sidebar></sidebar>
    <div class="main-panel">
      <navbar></navbar>
      <inner></inner>
    </div>
    <md-snackbar :md-position="position" :md-duration="isInfinity ? Infinity : duration" :md-active.sync="showSnackbar" md-persistent>
      <span>{{ message }}</span>
      <md-button class="md-primary" @click="showSnackbar = false">关闭</md-button>
    </md-snackbar>
    <Message v-show="msgflg" :msgtype="msgtype" :msgcontent="msg"></Message>
  </div>
</template>

<script>
import navbar from './layout/navbar'
import sidebar from './layout/sidebar'
import inner from './layout/inner'
import { mapActions } from 'vuex'
import Message from '@/views/Common/Unit/Message'
export default {
  data: function () {
    return this.$store.state.frame.data
  },
  methods: {
    ...mapActions({
      initMqtt: 'initMqtt',
      onConnectionLost: 'onConnectionLost',
      onMessageArrived: 'onMessageArrived',
      onConnect: 'onConnect'
    })
  },
  mounted () {
    this.initMqtt()
  },
  components: {
    Message,
    navbar,
    sidebar,
    inner
  }
}

</script>
